<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box {
            width: 430px;
            height: 430px;
            border: 1px solid #DDDDDD;
            position: relative;
            margin: 50px;
        }
        #small_box {
            width: 430px;
            height: 430px;
            position: relative;
        }
        div #mask{
            position: absolute;
            width: 210px;
            height: 210px;
            /* background: url(images/1.png) repeat; */
            background:rgba(0,0,0,0.3);
            top: 0;
            left: 0;
            display: none;
        }
        #big_box {
            width: 430px;
            height: 430px;
            position: absolute;
            top: 0;
            left: 440px;
            border: 1px solid #dddddd;
            overflow: hidden;
            display: none;
        }
        #big_box img {
            position: absolute;
            z-index: 5;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="small_box">
            <img src="images/2.png" >
            <span id="mask" class="cao"></span>
        </div>
        <div id="big_box"><img src="images/da2.png"></div>
    </div>
   
    <script>
        window.onload=function (){
            //获取标签
            var box =document.getElementById('box');
            var small_box=box.children[0];
            var big_box=box.children[1];
            var small_img=small_box.children[0];
            var mask=small_box.children[1];
            var big_img=big_box.children[0];
            //监听鼠标移入
            small_box.onmouseover = function (){
                //让遮罩层和大盒子显示出来
                mask.style.display='block';
                big_box.style.display='block';
                //监听鼠标移动
                small_box.onmousemove=function(e){
                    e=e||window.enent;
                    //求出小盒子移动的水平和垂直距离
                    var moveX=e.clientX-small_box.offsetLeft-box.offsetLeft-mask.offsetWidth*0.5;
                    var moveY=e.clientY-small_box.offsetTop-box.offsetTop-mask.offsetHeight*0.5;
                    //边界处理
                    if(moveX<0){
                        moveX=0;
                    }else if(moveX>=small_box.offsetWidth-mask.offsetWidth){
                        moveX=small_box.offsetWidth-mask.offsetWidth;
                    }
                    if(moveY<0){
                        moveY=0;
                    }else if(moveY>=small_box.offsetHeight-mask.offsetHeight){
                        moveY=small_box.offsetHeight-mask.offsetHeight;
                    }
                    //设置mask的left和top值
                    mask.style.left=moveX+'px';
                    mask.style.top=moveY+'px';
                    //让大盒子显示大图的移动
                    //moveX/大图移动的距离=（small_box.offsetWidth-mask.offsetWidth）/（big_imgoffsetWidth-big_box.offsetWidth）
                   // big_img.style.left=(-moveX/(small_box.offsetWidth-mask.offsetWidth))*(big_img.offsetWidth-big_box.offsetWidth);
                   // big_img.style.top=(-moveY/(small_box.offsetHeight-mask.offsetHeight))*(big_img.offsetHeight-big_box.offsetHeight);
                    var x=-moveX/(small_box.offsetWidth-mask.offsetWidth);
                    var y=-moveY/(small_box.offsetHeight-mask.offsetHeight);
                    big_img.style.left=x*(big_img.offsetWidth-big_box.offsetWidth)+'px';
                    big_img.style.top=y*(big_img.offsetHeight-big_box.offsetHeight)+'px';
                }
                small_box.onmouseout=function(){
                    mask.style.display='none';
                    big_box.style.display='none';
                }
            }
        }
    </script>
</body>
</html>